<template>
  <div class="url-codec">
    <el-card>
      <template #header>
        <div class="card-header">
          <h3>URL编解码工具</h3>
        </div>
      </template>

      <el-form>
        <el-form-item>
          <el-input
            v-model="input"
            type="textarea"
            :rows="6"
            placeholder="请输入要编码或解码的URL"
          />
        </el-form-item>

        <el-form-item>
          <el-button-group>
            <el-button type="primary" @click="encodeUrl">编码</el-button>
            <el-button type="success" @click="decodeUrl">解码</el-button>
            <el-button @click="copyResult">复制结果</el-button>
            <el-button @click="clearAll">清空</el-button>
          </el-button-group>
        </el-form-item>

        <el-divider>编码结果</el-divider>

        <el-form-item>
          <div class="result-wrapper">
            <pre class="result">{{ result }}</pre>
          </div>
        </el-form-item>

        <el-divider>URL参数解析</el-divider>

        <el-form-item>
          <div class="params-table" v-if="params.length > 0">
            <el-table :data="params" border>
              <el-table-column prop="key" label="参数名" />
              <el-table-column prop="value" label="参数值" />
              <el-table-column prop="decodedValue" label="解码后的值" />
            </el-table>
          </div>
          <el-empty v-else description="无URL参数" />
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'

const input = ref('')
const result = ref('')
const params = ref([])

// 编码URL
const encodeUrl = () => {
  if (!input.value) {
    ElMessage.warning('请输入要编码的URL')
    return
  }
  result.value = encodeURIComponent(input.value)
}

// 解码URL
const decodeUrl = () => {
  if (!input.value) {
    ElMessage.warning('请输入要解码的URL')
    return
  }
  try {
    result.value = decodeURIComponent(input.value)
  } catch (e) {
    ElMessage.error('解码失败：无效的URL编码')
  }
}

// 解析URL参数
const parseUrlParams = (url) => {
  try {
    const urlObj = new URL(url)
    const searchParams = new URLSearchParams(urlObj.search)
    const newParams = []
    
    for (const [key, value] of searchParams.entries()) {
      newParams.push({
        key,
        value,
        decodedValue: decodeURIComponent(value)
      })
    }
    
    params.value = newParams
  } catch (e) {
    // 如果不是完整的URL，尝试直接解析查询字符串
    try {
      const searchParams = new URLSearchParams(url.includes('?') ? url.split('?')[1] : url)
      const newParams = []
      
      for (const [key, value] of searchParams.entries()) {
        newParams.push({
          key,
          value,
          decodedValue: decodeURIComponent(value)
        })
      }
      
      params.value = newParams
    } catch (e) {
      params.value = []
    }
  }
}

// 复制结果
const copyResult = () => {
  if (!result.value) {
    ElMessage.warning('没有可复制的内容')
    return
  }
  navigator.clipboard.writeText(result.value)
    .then(() => ElMessage.success('复制成功'))
    .catch(() => ElMessage.error('复制失败'))
}

// 清空所有
const clearAll = () => {
  input.value = ''
  result.value = ''
  params.value = []
}

// 监听输入变化，自动解析参数
watch(input, (newValue) => {
  if (newValue) {
    parseUrlParams(newValue)
  } else {
    params.value = []
  }
})
</script>

<style scoped>
.url-codec {
  max-width: 1200px;
  margin: 0 auto;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

h3 {
  margin: 0;
}

.result-wrapper {
  background-color: #f5f7fa;
  border-radius: 4px;
  padding: 15px;
}

.result {
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: monospace;
}

.params-table {
  margin-top: 10px;
}
</style> 